<template>
  <view class="donate-container">
    <!-- 顶部导航栏 -->
    <view class="nav-header">
      <text class="nav-title">捐款</text>
    </view>

    <!-- 捐赠名录标题 -->
    <view class="section-title">
      <view class="title-text">捐赠名录</view>
      </view>
      
    <!-- 捐赠列表区域 -->
    <view class="donate-list-section">
      <!-- 表头 -->
      <view class="donate-table-header">
        <view class="table-col col-name">捐赠人/企业</view>
        <view class="table-col col-project">项目</view>
        <view class="table-col col-amount">金额</view>
      </view>
      
      <!-- 数据列表（滚动容器） -->
      <scroll-view 
        class="donate-scroll-view" 
        scroll-y 
        :show-scrollbar="false"
        :scroll-top="donateScrollTop"
        scroll-with-animation
        @touchstart.stop
        @touchmove.stop>
        <view class="donate-table-body">
          <view class="table-row" v-for="(item, index) in donateList" :key="index">
            <view class="table-col col-name">{{ item.name }}</view>
            <view class="table-col col-project">{{ item.project }}</view>
            <view class="table-col col-amount amount-text">¥ {{ item.amount.toLocaleString() }}</view>
                    </view>
                  </view>
      </scroll-view>
      </view>
    
    <!-- 操作按钮区 -->
    <view class="action-buttons">
      <view class="btn btn-donate" @click="handleDonate">我要捐赠</view>
            </view>
           
    <!-- 捐赠寄语区 -->
    <view class="message-section">
      <view class="section-title">
        <view class="title-text">捐赠寄语</view>
            </view>
            
      <!-- 寄语列表（带背景图） -->
      <view class="message-list-wrapper">
        <!-- 背景图片 -->
        <image class="message-background" :src="backgroundImage" mode="aspectFill"></image>
        
        <!-- 寄语列表内容（滚动容器） -->
        <scroll-view 
          class="message-scroll-view" 
          scroll-y 
          :show-scrollbar="false"
          :scroll-top="messageScrollTop"
          scroll-with-animation
          @touchstart.stop
          @touchmove.stop>
          <view class="message-list">
            <view class="message-item" v-for="(msg, index) in messageList" :key="index">
              <view class="message-content-wrapper">
                <view class="message-name">{{ msg.name }}</view>
                <view class="message-text">{{ msg.content }}</view>
                <view class="message-date">{{ msg.date }}</view>
              </view>
              </view>
                </view>
        </scroll-view>
            </view>
          </view>
          
    <!-- 底部安全区域占位 -->
    <view class="bottom-safe-area"></view>
  </view>
</template>

<script>
  export default {
  name: 'DonatePage',
  data() {
      return {
      // 捐赠列表数据
      donateList: [
        { name: '李明浩', project: '图书馆建设', amount: 50000 },
        { name: '张雅萍', project: '奖学金基金', amount: 30000 },
        { name: '王志强', project: '实验室设备', amount: 80000 },
        { name: '陈晓琳', project: '校园绿化', amount: 20000 },
        { name: '刘德华基金会', project: '艺术中心', amount: 150000 },
        { name: '赵敏', project: '体育设施', amount: 45000 },
        { name: '孙建国', project: '教学楼修缮', amount: 120000 },
        { name: '周杰伦', project: '音乐教室', amount: 88000 },
        { name: '吴彦祖', project: '建筑设计室', amount: 66000 },
        { name: '林志玲', project: '学生活动中心', amount: 55000 }
      ],
      // 捐赠寄语数据
      messageList: [
        { 
          name: '李明浩', 
          content: '希望母校越办越好，培养更多优秀人才！', 
          date: '2023-09-15',
          image: ''
        },
        { 
          name: '张雅萍', 
          content: '感恩母校培养！愿学弟学妹们学业有成！', 
          date: '2023-08-22',
          image: ''
        },
        { 
          name: '王志强', 
          content: '欣闻母校科研团队，定在代码前进！', 
          date: '2023-07-30',
          image: ''
        },
        { 
          name: '陈晓琳', 
          content: '母校环境越来越美，祝愿发展越来越好！', 
          date: '2023-07-15',
          image: ''
        },
        { 
          name: '赵敏', 
          content: '感谢母校的培养，愿为母校发展贡献力量！', 
          date: '2023-06-28',
          image: ''
        },
        { 
          name: '孙建国', 
          content: '祝愿母校桃李满天下，再创辉煌！', 
          date: '2023-06-10',
          image: ''
        }
      ],
      // 背景图片 - 青山镇成人教学篇校园图
      backgroundImage: '/static/campus-background.jpg',
      // 滚动位置
      donateScrollTop: 0,
      messageScrollTop: 0,
      // 定时器
      donateTimer: null,
      messageTimer: null
    }
  },
  mounted() {
    // 页面加载后启动自动滚动
    this.startAutoScroll()
  },
  beforeDestroy() {
    // 页面销毁前清除定时器
    this.stopAutoScroll()
  },
  methods: {
    // 兼容原圈子页面的视频控制方法（防止报错）
    stopAllVideo() {
      // 捐赠平台页面无视频，空方法即可
    },
    // 启动自动滚动
    startAutoScroll() {
      // 捐赠名录自动滚动（每2.5秒滚动一次）
      this.donateTimer = setInterval(() => {
        this.donateScrollTop += 60 // 每次滚动60rpx（约0.8行，更平滑）
        // 滚动到底部后重置
        if (this.donateScrollTop > 600) {
          this.donateScrollTop = 0
        }
      }, 2500)
      
      // 捐赠寄语自动滚动（每3.5秒滚动一次）
      this.messageTimer = setInterval(() => {
        this.messageScrollTop += 80 // 每次滚动80rpx（更平滑）
        // 滚动到底部后重置
        if (this.messageScrollTop > 500) {
          this.messageScrollTop = 0
        }
      }, 3500)
    },
    // 停止自动滚动
    stopAutoScroll() {
      if (this.donateTimer) {
        clearInterval(this.donateTimer)
        this.donateTimer = null
      }
      if (this.messageTimer) {
        clearInterval(this.messageTimer)
        this.messageTimer = null
      }
    },
    // 跳转到捐赠页面
    handleDonate() {
      	uni.navigateTo({
        url: '/pages/circle/donate'
      })
    },
    viewMore() {
      // 查看更多寄语
    }
    }
  }
</script>

<style lang="scss" scoped>
.donate-container {
      width: 100%;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: env(safe-area-inset-bottom);
}


/* 顶部导航栏 */
.nav-header {
  background: #FFFFFF;
  height: 100rpx;
  padding-top: calc(env(safe-area-inset-top));
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  
  .nav-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    letter-spacing: 2rpx;
  }
}

/* 区域标题（捐赠名录、捐赠寄语） */
.section-title {
  padding: 0 30rpx;
  margin: 25rpx 0 20rpx;
  display: flex;
  align-items: center;
  
  .title-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    position: relative;
    padding-left: 20rpx;
    display: flex;
    align-items: center;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 32rpx;
      background-color: #138e31;
      border-radius: 3rpx;
    }
  }
}

/* 捐赠列表区域 */
.donate-list-section {
  margin: 0 30rpx 40rpx;
  background-color: #E8F5F1;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
}

.donate-table-header {
  display: flex;
  align-items: center;
  padding: 20rpx 10rpx;
  background-color: #138e31;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  
  .table-col {
    font-size: 28rpx;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
  }
}

/* 捐赠列表滚动容器 */
.donate-scroll-view {
  height: 400rpx;
        width: 100%;
  pointer-events: none;
  
  /* 禁用鼠标滚轮 */
  ::-webkit-scrollbar {
    display: none;
  }
}

.donate-table-body {
  .table-row {
    display: flex;
    align-items: center;
    padding: 25rpx 10rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  .table-col {
    font-size: 26rpx;
    color: #333333;
    text-align: center;
    line-height: 1.5;
  }
}

.col-name {
  flex: 0 0 30%;
  text-align: left;
  padding-left: 10rpx;
}

.col-project {
  flex: 0 0 40%;
  text-align: center;
}

.col-amount {
  flex: 0 0 30%;
  text-align: right;
  padding-right: 10rpx;
}

.amount-text {
  color: #E74C3C;
  font-weight: bold;
  font-size: 28rpx;
}

/* 操作按钮区 */
.action-buttons {
  padding: 0 30rpx;
  margin-bottom: 40rpx;
  
  .btn {
    width: 100%;
    height: 88rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: bold;
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
  }
  
  .btn-donate {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    color: #FFFFFF;
  }
}

/* 捐赠寄语区 */
.message-section {
  margin: 0 30rpx;
  
  .message-list-wrapper {
    position: relative;
    border-radius: 16rpx;
    overflow: hidden;
    height: 600rpx;
    
    .message-background {
          position: absolute;
      top: 0;
      left: 0;
          width: 100%;
          height: 100%;
      z-index: 0;
      opacity: 0.8;
    }
    
    .message-scroll-view {
        position: relative;
        z-index: 1;
    height: 100%;
      width: 100%;
      box-sizing: border-box;
      pointer-events: none;
      
      /* 禁用鼠标滚轮 */
      ::-webkit-scrollbar {
        display: none;
      }
    }
    
    .message-list {
      position: relative;
      z-index: 1;
      padding: 40rpx 50rpx;
      
      .message-item {
        background-color: rgba(255, 255, 255, 0.85);
        border-radius: 12rpx;
        padding: 20rpx;
        margin-bottom: 30rpx;
        box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(8rpx);
        
        .message-content-wrapper {
          .message-name {
            font-size: 24rpx;
            font-weight: bold;
            color: #1a1a1a;
            margin-bottom: 10rpx;
    display: flex;
            align-items: center;
            text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
            
            &::before {
              content: '';
              display: inline-block;
              width: 6rpx;
              height: 6rpx;
              background-color: #FF6B6B;
              border-radius: 50%;
              margin-right: 8rpx;
            }
          }
          
          .message-text {
            font-size: 22rpx;
            color: #333333;
            line-height: 1.5;
            margin-bottom: 8rpx;
            text-align: justify;
            text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.6);
          }
          
          .message-date {
            font-size: 20rpx;
            color: #666666;
            text-align: right;
            text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.5);
          }
        }
      }
    }
  }
}

/* 底部安全区域 */
.bottom-safe-area {
  height: calc(120rpx + env(safe-area-inset-bottom));
}
</style>
